<div :class="[componentId]">
  <cly-header>
      <template v-slot:header-left>
          <h2>{{i18n('sources.title')}}</h2>
          <cly-tooltip-icon :tooltip="i18n('sources.description')" icon="ion ion-help-circled" style="margin-left:8px" placement="bottom-end"> </cly-tooltip-icon>
      </template>
      <template v-slot:header-right>
        <cly-more-options v-if="topDropdown" size="small">
          <el-dropdown-item :key="idx" v-for="(item, idx) in topDropdown">
            <!--<span :class="item.icon"></span>-->
            <a :href="item.value" class="bu-ml-1">{{item.label}}</a>
          </el-dropdown-item>
          <el-dropdown-item>
            <!--<span class="ion-settings"></span>-->
            <a href="#/manage/configurations/sources" class="bu-ml-1">{{ i18n('sources.plugin-settings') }}</a>
          </el-dropdown-item>
        </cly-more-options>
      </template>
  </cly-header>
  <cly-main>
  <cly-date-picker-g class="acquisition-sources-view__date-picker-container"></cly-date-picker-g>
  <cly-section>
    <div class="bu-columns bu-is-gapless">
      <div class="bu-column bu-is-6">
        <cly-chart-pie :option="pieSourcesTotalSessions" :showToggle="false" v-loading="isLoading" :force-loading="isLoading"></cly-chart-pie>
      </div>
      <div class="bu-column bu-is-6">
        <cly-chart-pie :option="pieSourcesNewUsers" :showToggle="false" v-loading="isLoading" :force-loading="isLoading"></cly-chart-pie>
      </div>
    </div>
  </cly-section>
  <cly-section>
    <cly-datatable-n :rows="sourcesData.chartData" :key-fn="sourcesFnKey" :hasDynamicCols="false" :force-loading="isLoading" ref="table" @row-click="handleTableRowClick" row-class-name="bu-is-clickable">
      <template v-slot:header-left="selectScope">
      </template>
      <template v-slot="scope">
        <el-table-column type="expand">
          <template slot-scope="rowScope">
            <extend-table class="acquisition-sources-view__extend-table" v-if="sourcesDetailData[rowScope.row.sources]" :rows="sourcesDetailData[rowScope.row.sources]"></extend-table>
          </template>
        </el-table-column>
        <el-table-column sortable="true" prop="sources" :label="i18n('sources.source')">
          <template v-slot="rowScope">
              <div>
                  {{ rowScope.row.sources }}
              </div>
          </template>
        </el-table-column>
        <el-table-column sortable="true" prop="t" :label="i18n('common.table.total-sessions')">
            <template v-slot="rowScope">
                <div>
                    {{ formatNumber(rowScope.row.t) }}
                </div>
            </template>
        </el-table-column>
        <el-table-column sortable="true" prop="u" :label="i18n('common.table.total-users')">
            <template v-slot="rowScope">
                <div>
                    {{ formatNumber(rowScope.row.u) }}
                </div>
            </template>
        </el-table-column>
        <el-table-column sortable="true" prop="n" :label="i18n('common.new-users')">
        <template v-slot="rowScope">
            <div>
                {{ formatNumber(rowScope.row.n) }}
            </div>
        </template>
        </el-table-column>
      </template>
    </cly-datatable-n>
  </cly-section>
  </cly-main>
</div>